<template>
  <div class="play-list">
    <div class="header">
      <div>播放列表</div>
      <div>
        <span>
          <input type="text" placeholder="搜索列表歌曲"/>
        </span>
        <span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tianjia"></use>
          </svg>
          添加到
        </span>
        <span @click="emptyMusicInfoList">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiaoxi"></use>
          </svg>
          清空
        </span>
      </div>
    </div>
    <div class="table">
      <div v-show="!musicInfoList.length">
        <div>暂无数据</div>
      </div>
      <table>
        <tbody>
        <tr v-for="(m,index) in musicInfoList" :key="m.id"
            :class="getClass(m.isPlay,m.isPlaying)">
          <td>
            <div>
              <span class="not-active">
                {{ m.title }}&nbsp;&nbsp;
              </span>
              <span class="not-active" v-show="m.isPlaying">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shengyin"></use>
              </svg>
              </span>
            </div>
            <div v-show="!m.isLoading">
              <span class="not-active" @click="play(index)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-bofangqi-bofang" v-show="!m.isPlaying"></use>
                  <use xlink:href="#icon-bofangqi-zanting" fill="#E6EAEF" v-show="m.isPlaying"></use>
                </svg>
              </span>
              <span class="not-active" v-show="!m.isCollection" @click="addCollection(index, m.isCollection)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuifanshu" v-show="m.isCollection"></use>
                  <use xlink:href="#icon-yizhuifan" fill="#f64e54" v-show="!m.isCollection"></use>
                </svg>
              </span>
              <span class="not-active">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai"></use>
                </svg>
              </span>
            </div>
            <div v-show="m.isLoading">
              <Chase :size="20" color="#7C808C"></Chase>
            </div>
          </td>
          <!-- <td>
            <div>
              <Chase size="20" color="red"></Chase>
            </div>
          </td>-->
          <td>{{ m.artist }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import {computed, watch, getCurrentInstance, onBeforeUnmount, onMounted} from "vue";
import {useStore} from "vuex";
import Chase from "@/components/Loading/Chase";
// 获取当前组件实例

export default {
  name: "PlayList",
  components: {Chase},
  description: {
    //播放列表
  },
  props: {
    isUpdatePlayList: Boolean
  },
  setup: function (props, context) {
    const store = useStore();
    const music = getCurrentInstance().appContext.config.globalProperties.$music;

    // 获取播放列表
    let musicInfoList = store.state.playList;
    let playingId = -1;

    // 检测是否播放完成
    let playbackCompleteClose;
    let playbackComplete = function () {
      clearInterval(playbackCompleteClose);
      playbackCompleteClose = setInterval(() => {
        // 获取正在播放歌曲的id
        let id = music.player.id;
        // 播放列表不小于1，且当前播放器记录id与播放列表记录id不一致
        if (musicInfoList.length && playingId !== id) {
          playingId = id;
          store.commit("SET_MUSIC_PLAYING", id);
        }
      }, 100);
    }

    // 读取收藏夹，并添加收藏标记，播放标记
    // music.addMark(musicListJson);

    function emptyMusicInfoList() {
      store.commit("EMPTY");
    }

    function play(index) {
      music.playModal(musicInfoList[index], {isAddHistory: false})
      //playbackComplete();
    }

    // 添加歌曲到收藏夹
    function addCollection(index, isCollection = true) {
      let musicInfo = musicInfoList[index];
      music.setCollection(musicInfo, isCollection);
    }

    const getClass = computed(() => (isPlay, isPlaying) => {
      let c1 = isPlay || isPlay === undefined ? 'play' : 'not-play';
      let c2 = isPlaying || isPlaying === undefined ? 'selected' : 'not-selected';
      //let c2 = isPlaying || isPlaying === undefined ? 'selected' : 'selected';
      return c1 + ' ' + c2;
    })

    /*watch(
        // pointer函数，监听的是什么
        () => props.isUpdatePlayList,
        // change函数，监听值的变化
        (newV, oldV) => {
          if (newV) {
            // 更新播放列表
            let musicListJson = getLocalStorageJson("musicList");
            music.addMark(musicListJson);
            musicInfoList.length = 0;
            musicInfoList.push(...musicListJson);
          }
        },
        {
          immediate: true, // 立即执行
          deep: true // 深度监听
        }
    )*/

    onMounted(() => {
      playbackComplete();
    });

    onBeforeUnmount(() => {
      //clearInterval(playbackCompleteClose);
      console.log("组件被销毁")
    });
    /*watch(route, (newValue, oldValue) => {
      songSheet.type = route.query.type;
      setPageStyle();
    });*/
    return {
      getClass,
      play,
      addCollection,
      musicInfoList,
      emptyMusicInfoList,
    }
  }
}
</script>

<style scoped lang="less">
@import url("@/assets/less/1.less");

.play-list {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  width: 500px;
  height: 100%;
  background-color: @bc;
  box-shadow: -5px 0 10px @fc;

  .header {
    width: 100%;
    height: 125px;
    background-color: @fc;

    div:first-child {
      padding: 20px 0 30px 30px;
      width: 100%;
      height: 30px;
      color: @fcc;
      font-size: 30px;
      border-radius: 30px;
    }

    div:last-child {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: flex-start;
      align-items: center;
      padding-left: 30px;
      width: 100%;
      height: 30px;

      span {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        color: @fbc;
        margin-right: 20px;

        input[type=text] {
          padding-left: 35px;
          width: 240px;
          height: 30px;
          color: @ffc;
          background-color: @fc;
          background-image: url('./images/search.png');
          background-position: 5px 5px;
          background-repeat: no-repeat;
          border-radius: 15px;
          border: none;
          font-size: 12px;
        }

        svg {
          .icon-min(@c:@fbc)
        }

        &:hover {
          color: @ffc;

          svg {
            fill: @ffc;
          }
        }
      }


      span:nth-child(1) {

      }

      span:nth-child(2) {

      }

      span:nth-child(3) {

      }
    }
  }

  .table {
    width: 100%;
    height: 550px;
    overflow-x: hidden; /*x轴禁止滚动*/
    overflow-y: scroll; /*y轴滚动*/

    /* 定义滚动条样式 */

    &::-webkit-scrollbar {
      //display: none;
      width: 0px; //定义滚动条宽度
      height: 10px; //定义滚动条高度
      /*width: 20px;*/
      border-radius: 10px; //定义滚动条圆角
      background-color: rgba(240, 240, 240, 0.1); //定义滚动条颜色
    }

    /*定义滚动条轨道 内阴影+圆角*/

    &::-webkit-scrollbar-track {
      border-radius: 10px;
      /*滚动条里面轨道*/
      background: @bc;
    }

    /*&::-webkit-scrollbar-track {
      display: none;
      box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); //定义轨道阴影
      border-radius: 10px; //定义轨道圆角
      background-color: rgba(4, 56, 114, .5); //定义轨道颜色
    }*/

    /*定义滑块 内阴影+圆角*/

    &::-webkit-scrollbar-thumb {
      border-radius: 10px; //定义滑块圆角
      box-shadow: inset 0 0 0 rgba(240, 240, 240, .5); //定义滑块阴影
      background-color: @fc //定义滑块颜色
    }

    div {
      height: 100%;
      display: flex;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      align-items: center;

      div {
        color: @ffc;
        font-size: 40px;
      }
    }

    table {
      position: relative;
      width: 100%;
      text-align: left;
      border-collapse: collapse;
      border-spacing: 0;

      th, td {
        padding: 0;
      }

      tbody {
        color: @ffc;
        table-layout: fixed;

        tr {
          position: relative;
          height: 50px;
          /*border: 1px solid #ea4a36;*/

          td:first-child {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            align-content: center;
            flex-wrap: nowrap;
            cursor: pointer;
            padding-left: 20px;
            width: 340px;
            height: 50px;

            div:first-child {
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-content: center;
              justify-content: flex-start;
              align-items: flex-start;
              height: 22px;
              .text(250px);

              span {
                svg {
                  fill: #f0a732;
                }
              }
            }

            div:nth-child(2) {
              display: flex;
              flex-wrap: nowrap;
              align-content: center;
              justify-content: space-between;
              align-items: center;
              flex-direction: row;

              margin-right: 10px;
              width: 80px;
              height: 22px;

              span {
                margin-left: 5px;
              }
            }

            /*div:last-child {
              margin-right: 20px;
              width: 80px;
              display: flex;
              flex-wrap: nowrap;
              align-content: center;
              justify-content: space-between;
              align-items: center;
              flex-direction: row;
              width: 80px;
              height: 22px;

              span {
                margin-left: 10px;
                margin-right: 10px;
              }
            }*/
          }

          td:last-child {
            position: relative;
            width: 140px;
            // 文本不换行
            white-space: nowrap;
            // 超过部分隐藏
            overflow: hidden;
            // 超过部分用...代替
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}

.not-active {
  svg {
    .icon-min(22px, @fbc)
  }

  &:hover {
    svg {
      fill: @fcc;
    }
  }
}

.active {
  svg {
    .icon-min(22px, @sc)
  }
}

.not-play {
  color: @fbc;
  cursor: not-allowed;
  pointer-events: none;
}

.play {
  &:hover {
    .selected;
  }
}

.not-selected {

}

.selected {
  @radius: 5px;
  cursor: default;

  td {
    background-color: #505663;
  }

  td:first-child {
    border-radius: @radius 0 0 @radius;
  }

  td:last-child {
    border-radius: 0 @radius @radius 0;
  }
}
</style>
